/*
 * @Author: xueyp
 * @Date: 2020-06-11 19:45:06
 * @Last Modified by: xueyp
 * @Last Modified time: 2020-06-12 15:55:00
 */
<template>
  <div class="ip-wrapper">
    <div v-swiper:mySwiper="swiperOption" class="swiper-wrapper-wrapper">
      <div class="swiper-wrapper">
        <div :class="['swiper-slide','swiper-slide-'+index]" :key="index" v-for="(banner,index) in bossList" :style="index === 1 ? swiperStyle : ''">
          <div class="swiper-item-img-wrapper">
            <img :src="banner.avatar">
            <div class="banner-name">
              {{ banner.name }}
            </div>
          </div>
          <div class="swiper-desc">
            {{ banner.desc }}
          </div>
        </div>
      </div>
    </div>
    <ipList />
  </div>
</template>

<script>
import ipList from "@/components/ipList";
export default {
  components: {
    ipList
  },
  data() {
    return {
      bossList: [
        {
          name: "赵艺(宝姐)",
          avatar:
            "https://ossko.bojem.com/keditor/20200507/24017711588814476.png",
          desc:
            "BOJEM（宝姐）珠宝创始人\n国际华人珠宝设计师\nGIA宝石鉴定专家\n珠宝及时尚意见领袖"
        },
        {
          name: "无忌哥Andy张骥",
          avatar:
            "https://ossko.bojem.com/keditor/20200507/27619191588814478.png",
          desc:
            "BOJEM（宝姐）珠宝创始人\n珠宝艺术品投资收藏家\n中国珠宝玉石首饰行业协会常务理事\n全国工商联金银商会常务理事"
        }
      ],
      swiperStyle: "",
      swiperOption: {
        initialSlide: 0,
        autoplay: false,
        loop: false,
        observer: true,
        observeParents: true,
        on: {
          slideChangeTransitionStart: () => {
            if (this.mySwiper.activeIndex === 1) {
              this.swiperStyle = `left:0!important`;
            } else {
              this.swiperStyle = `left:-0.5rem!important`;
            }
          }
        }
      }
    };
  }
};
</script>
<style lang="stylus" scoped>
.ip-wrapper {
  background: rgba(245, 245, 245, 1);
  height: 100%;
  padding-bottom: 2rem;
  padding-top: 0.3rem;
  animation: course-out 0.4s linear;

  .swiper-wrapper-wrapper {
    padding-left: 0.3rem;
    margin-bottom: 0.36rem;

    .swiper-slide {
      width: 6.4rem !important;
      // height: 9rem;
      background: #ffffff;
      overflow: hidden;
      position: relative;

      .swiper-item-img-wrapper {
        display: inline-block;
        padding: 0;
        margin: 0;
        line-height: 0;
        position: relative;

        img {
          width: 6.4rem;
        }

        .banner-name {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 3.7rem;
          height: 0.8rem;
          background: rgba(123, 44, 63, 1);
          opacity: 0.7;
          font-size: 0.34rem;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 0.48rem;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          line-height: 0.8rem;
        }
      }

      .swiper-desc {
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 0.46rem;
        color: rgba(0, 0, 0, 1);
        opacity: 1;
        white-space: pre-wrap;
        padding: 0.41rem 0.67rem 0.65rem 0.65rem;
      }

      &:last-child {
        left: -0.5rem;
      }
    }

    .swiper-slide-1 {
      margin-left: 43px;
    }
  }
}
</style>
